<template>
  <div class="reg-container">
    <div class="content">
      <el-card class="card-box" shadow="never">
        <div class="reg-bg"></div>
        <el-form
          class="ruleForm"
          :rules="regRules"
          :model="regForm"
          ref="regForm"
          size="small"
          label-width="80px"
          :hide-required-asterisk="true"
        >
          <el-form-item label="手机号码" prop="telephone" >
            <el-input
              v-model="regForm.telephone"
              type="text"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" >
            <el-input
              type="password"
              v-model="regForm.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword">
            <el-input
              type="rePassword"
              v-model="regForm.rePassword"
              placeholder="请输入确认密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input
              type="email"
              v-model="regForm.email"
              placeholder="请输入邮箱地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input
              type="text"
              v-model="regForm.idCard"
              placeholder="请输入身份证号码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="Vcode">
            <el-input
              type="text"
              v-model="regForm.Vcode"
              placeholder="请输入验证码"
              style="width: 200px; margin-right: 10px"
            ></el-input>
            <el-button type="primary" @click="sendCode" :disabled="disabledbtn">{{ second===totalSecond?'发送验证码':second+'秒后重新发送' }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
          @click="handleRegistry"
          class="login-btn"
          type="primary"
          size="small"
          style="width: 300px; height: 35px"
          >立即注册</el-button
        >
          </el-form-item>
        </el-form>
      </el-card>
      <div class="logo"></div>
    </div>
  </div>
</template>

<script>
import { registry } from '@/api/user'
import { getRegistryCode } from '@/api/common'
export default {
  name: 'registryIndex',
  data () {
    return {
      disabledbtn: false,
      timer: '',
      totalSecond: 10,
      second: 10,
      regForm: {
        telephone: '',
        password: '',
        rePassword: '',
        email: '',
        idCard: '',
        Vcode: ''
      },
      regRules: {
        telephone: [
          {
            required: true,
            message: '请输入手机号码',
            triggle: 'blur'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对',
            triggle: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            triggle: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码长度应该为6-16位之间',
            triggle: 'blur'
          }
        ],
        rePassword: [
          {
            required: true,
            message: '请输入确认密码',
            triggle: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.regForm.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            triggle: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            triggle: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '邮箱格式不对',
            triggle: 'blur'
          }
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号码',
            triggle: 'blur'
          },
          {
            pattern: /^\d{17}[\dX]$/,
            message: '身份证号码格式不对',
            triggle: 'blur'
          }
        ],
        Vcode: [
          {
            required: true,
            message: '请输入短信验证码',
            triggle: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleRegistry () {
      this.$refs.regForm.validate(async (value) => {
        if (value) {
          this.goRegistry()
        }
      })
    },
    sendCode () {
      if (!this.timer && this.second === this.totalSecond) {
        this.disabledbtn = true
        this.getEmailCode()
        this.timer = setInterval(() => {
          this.second--
          if (this.second < 1) {
            clearInterval(this.timer)
            this.timer = null
            this.second = this.totalSecond
            this.disabledbtn = false
          }
        }, 1000)
      }
    },
    async getEmailCode () {
      if (!this.regForm.email) {
        this.$message({
          message: '请输入邮箱地址',
          type: 'warning'
        })
        return false
      }
      const res = await getRegistryCode(this.regForm.email)
      this.$message({
        type: 'success',
        message: res
      })
    },
    async goRegistry () {
      const res = await registry(this.regForm.telephone, this.regForm.password, this.regForm.email, this.regForm.Vcode, this.regForm.idCard)
      this.$message({
        message: res,
        type: 'success'
      })
      this.regForm = ''
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.reg-container {
  display: flex;
  height: 100vh;
  align-items: stretch;
  .content {
    display: flex;
    flex-direction: row;
    width: 100%;
    // border: 2px solid #fff;
    .el-card {
      background-color: #fff;
      width: 500px;
      flex: 5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // margin-bottom: 100px;
      border: 0;
      .reg-bg {
        width: 100%;
        height: 50px;
        margin-bottom: 30px;
        text-align: center;
        background: url(../../assets/registry-title.jpg) no-repeat;
        background-size: cover;
      }
    }
    .logo {
      display: flex;
      flex-direction: column;
      flex: 5;
      margin: 0 auto;
      background: url(../../assets/login-logo.jpg) no-repeat center;
      background-size: 512px;
      background-position: 0 100px;
      // background-color: red;
    }
  }
}
</style>
